<template>
  <el-card class="mb-3 command-box">
    <div class="text-center">
      <div class="card-body command-box-header" style="position: relative;" @click="startNewCommand(commandType)">
        <div style="position: absolute; top: -5px; right: 0px;">

          <i
            v-show="deleteCallback !== undefined"
            class="el-icon-delete mr-2 button-primary"
            @click="deleteCallback(commandType)"
          />
          <i
            v-show="editCallback !== undefined"
            class="el-icon-edit-outline button-primary"
            @click="editCallback(commandType)"
          />
        </div>
        <div class="rounded inline-block mt-3" style="height: 64px;">
          <img
            :src="logo"
            alt
            width="64"
            height="64"
            class="float-left mr-3"
          >
        </div>
        <p class="font-bold mt-3">{{ this.commandName }}</p>
        <p
          class="text-secondary command-box-desc mt-3 mb-1"
        >{{ commandDesc }}</p>
      </div>
      <!-- <div class="h-px bg-gray-200" style="margin: 0 -20px" /> -->
      <el-row class="command-box-foot text-left text-secondary">
        <el-col v-show="lastCommandData !== undefined && lastCommandData.time !== undefined" :span="18">
          <span>{{ this.$t('cmd.last_time') }}: {{ lastCommandData === undefined || lastCommandData.time === undefined ? '-' : lastCommandData.time }}</span>
        </el-col>
        <el-col :span="6" class="text-right">
          <el-button
            v-if="commandType == 'BB' && lastCommandData !== undefined && lastCommandData.time !== null && downloadButtonCallback !== undefined"
            class="text-right"
            icon="el-icon-view"
            @click.stop="viewButtonCallback(commandType, lastCommandData.id)"
          />
          <el-button
            v-if="lastCommandData !== undefined && lastCommandData.time !== null && downloadButtonCallback !== undefined"
            icon="el-icon-download"
            round
            @click="downloadButtonCallback(commandType, lastCommandData.id)"
          />
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>
<script>
export default {
  name: 'CommandBox',
  props: {
    commandType: String,
    logo: String,
    commandName: String,
    commandDesc: String,
    lastCommandData: {
      id: Number,
      time: String
    },
    newCommandEvent: Function,
    viewButtonCallback: Function,
    downloadButtonCallback: Function,
    editCallback: Function,
    deleteCallback: Function
  },
  methods: {
    startNewCommand: function(commandType) {
      if (this.newCommandEvent != null) {
        this.newCommandEvent(commandType)
      }
    },
    test(lastCommandData, viewButtonCallback) {
      console.log(lastCommandData)
      console.log(viewButtonCallback)
      return false
    }
  }
}
</script>
<style scoped lang='scss'>
    .command-box {
        &:hover {
            /*background-color: #EDF2F9;*/
          border: 1px solid #3B82F6;
        }
        .command-box-desc {
            height: 3em;
            overflow: hidden;
            vertical-align: middle;
            display: inline-block;
        }
        .command-box-foot {
            margin-bottom: -15px;
            padding: 0.5em 0 0 0;
            font-size: 14px;
            line-height: 2em;
            & button {
                border: 0px;
                border-radius: 2px;
                padding: 0.4em;
                background: none;
                &:hover {
                    background-color: #ccccee;
                    border-radius: 3px;
                }
            }

        }
    }
</style>
